<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
    <div>
        <div class="container">
            <!-- 查询条件 -->
            <el-form :model="formInline.queryItem" class="select-submit-form">
                <el-row type="flex">
                    <el-col :span="8">
                        <el-form-item label="结算类型">
                            <el-select v-model="formInline.queryItem.settleType"  @change="changeTaskType">
                                <el-option v-for="item in taskTypeList" :key="item.taskTypeCode" :label="item.taskTypeName" :value="item.taskTypeCode"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if='isShow01'>
                        <el-form-item label="结算单号">
                            <el-input v-model="formInline.queryItem.settleNo" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if='isShow02'>
                        <el-form-item label="大病赔案号">
                            <el-input v-model="formInline.queryItem.caseNo" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="select-btn-group">
                       <el-button type="primary" size="medium"  @click="handleSearch">查询</el-button>
                       <el-button type="primary" size="medium" @click="handleReset">重置</el-button>
                    </div>
                  </el-col>
                </el-row>
            </el-form>
            <!-- 列表 -->
            <el-table
                :data="tableData"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                style="margin: 30px 0;border: 1px solid #d6d9d8;"
                v-loading="loading"
                element-loading-text="Loading....."
            >
                <el-table-column fixed type="index"  label="序号" width="55"></el-table-column>
                <el-table-column prop="businessNo" label="业务单号"  width="165" align="center"></el-table-column>
                <el-table-column prop="settleType" :formatter="formatPrintType" label="结算类型" align="center"></el-table-column>
                <el-table-column prop="policyNo" label="保单号"  width="165" align="center"></el-table-column>
                <el-table-column prop="thisPaid" label="赔款合计" align="center"></el-table-column>
                <el-table-column prop="thisFee" label="赔案费用合计" align="center"></el-table-column>
                <el-table-column prop="thisSumAmount" label="赔款支付金额" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="text"
                    @click="printTask(scope.row)">下载</el-button>
                    <!-- <el-button
                      size="mini"
                      type="text"
                      @click="preview(scope.row)">展示</el-button> -->
                </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
              <div v-show=" pagination.totalPage>0" class="index_page">
                <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                               :page-sizes="[10, 25, 50, 100, 500, 1000, 5000]"
                               :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                               @size-change="handleSizeChange" @current-change="queryFun">
                </el-pagination>
              </div>
            </div>
<el-dialog title="" :visible.sync="dialogVisible" width="80%" top="20px">
  <div class="pdf" style="height: 450px">
    <iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
  </div>
</el-dialog>
        </div>
    </div>

</template>




<script>
import{querySettleBillList,printSettleBill,previewSettleBill,showPdf}from '@/api/baseDate';
import Cookies from 'js-cookie';
export default {
    name: 'printSettlement',
    data() {
        return {
            //定义data
            pdfUrl:'',// pdf路径
            loading: false,
            isShow01: true,
            isShow02: false,
            pagination: {
                currentPage: 1, // 当前页
                rowsNumber: 10, // 每页条数
                totalPage: 0 // 总条数
            },
            taskTypeList:[ // 是否重开
                {
                    taskTypeCode:'2',
                    taskTypeName:'企业'
                },
                {
                    taskTypeCode:'1',
                    taskTypeName:'个人'
                },
            ],
            formInline: { // 查询条件
                queryItem:{
                    settleType:'',
                    businessNo:'',
                    settleNo:'',
                    caseNo:''
                    }
            },
            tableData:[], // 查询的列表数据
            dialogVisible:false
            
        };
    },
    created() {
        // 初始化页面默认选中第一个
        this.formInline.queryItem.settleType = this.taskTypeList[0].taskTypeCode
        // 初始化查询数据

    },
    methods: {

        // 监听类型改变实践
        changeTaskType(){
            let type =  this.formInline.queryItem.settleType;
            this.formInline.queryItem.businessNo = '';
            if(type === '2'){
                this.isShow01 = true;
                this.isShow02 = false;
                this.formInline.queryItem.caseNo = '';
            }else{
                this.isShow01 = false;
                this.isShow02 = true;
                this.formInline.queryItem.settleNo = '';
            }
        },
        // 改变当前页条数事件
        handleSizeChange(pageSize){
            let pageIndex = this.pagination.currentPage;
            this.queryTaskList(pageIndex,pageSize);
        },
        // 改变当前页事件
        queryFun(pageNum){
            let rowsNumber = this.pagination.rowsNumber;
            this.queryTaskList(pageNum,rowsNumber);
        },
        // 查询
        handleSearch() {
            let pageIndex = this.pagination.currentPage;
            let rowsNumber = this.pagination.rowsNumber;
            this.queryTaskList(pageIndex,rowsNumber);
        },
        // 重置
        handleReset(){
            this.formInline.queryItem.caseNo = '';
            this.formInline.queryItem.settleNo = '';
            this.formInline.queryItem.businessNo = '';
        },
        // 查询列表
        queryTaskList(pageNum,pageSize){
            let param = {
                ...this.formInline.queryItem,
                pageNum:pageNum,
                pageSize:pageSize,
                comCode:Cookies.get("makeCom")
            }
            if(param.settleType === '2'){
                param.businessNo = param.settleNo;
                param.settleNo = '';
            }

            if(param.settleType === '1'){
                param.businessNo = param.caseNo;
                param.caseNo = '';
            }

            // 调用查询方法
            this.loading = true;
            querySettleBillList(param).then((res)=> this.handleTaskListResponse(res));
        },
        // 处理查询列表返回数据
        handleTaskListResponse(res){
            this.loading = false;
            if(res){
                if(res.data.resultCode){
                    if(res.data.resultCode != '0000'){
                        // 返回失败
                        this.$message.error(res.data.resultMsg);
                    }else{
                        // 返回成功
                        this.tableData = res.data.list;
                        this.pagination.totalPage = res.data.total;
                    }
                }
            }else{
                this.$message.error('系统异常');
            }
        },
        // 打印任务
        printTask(row){
            let param = {
                settleType: this.formInline.queryItem.settleType,
                businessNo: row.businessNo
            }
            this.loading = true;
            printSettleBill(param).then(res => this.handlePrintPdf(res,row.businessNo));
        },
        handlePrintPdf(res,businessNo){
            this.loading = false;
            var binaryData = [];
            binaryData.push(res);
            let blob = new Blob(binaryData, {type:"application/pdf"});
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob)
            link.download = businessNo+".pdf"
            link.click()
            URL.revokeObjectURL(link.href)
            //  window.open("./static/pdf/web/viewer.html?file="+encodeURIComponent(link.href));
        },
        preview(row){
            var data={
                settleType: this.formInline.queryItem.settleType,
                businessNo: row.businessNo
            };
            previewSettleBill(data).then((res) =>{
            var binaryData = [];
            binaryData.push(res.data.pdfBytes);
            let url=window.URL.createObjectURL(new Blob(binaryData, {type:"application/pdf"}));
            this.pdfUrl="./static/pdf/web/viewer.html?file="+encodeURIComponent(url);
            this.dialogVisible =true;
            });
        }
    }
};
</script>
